<template>
   <div class="warehouse-details">
      <el-drawer
         v-model="dialogVisible"
         title="仓库详情111"
         size="1300px"
         :with-header="false"
         direction="rtl"
      >
         <div class="drawer-header">
            <div class="title">{{ props.orderList.return_no }}</div>
         </div>
         <div class="drawer-content">
            <div class="tab-header">
               <div class="warehouse-info">
                  <div class="info-item">
                     <div class="label">关联采购单号</div>
                     <div class="value">{{ props.orderList.purchase_order_no }}</div>
                  </div>
                  <div class="info-item">
                     <div class="label">退货金额(元)</div>
                     <div class="value">{{ props.orderList.total_amount }}</div>
                  </div>
                  <div class="info-item">
                     <div class="label">退货日期</div>
                     <div class="value">{{ props.orderList.return_date }}</div>
                  </div>
                  <div class="info-item">
                     <div class="label">订单类型</div>
                     <div class="value">{{ props.orderList.manager_name }}</div>
                  </div>
                  <div class="info-item">
                     <div class="label">退货负责人</div>
                     <div class="value">{{ props.orderList.manager_name }}</div>
                  </div>
                  <div class="info-item">
                     <div class="label">负责人电话</div>
                     <div class="value">{{ props.orderList.manager_phone }}</div>
                  </div>

                  <div class="info-item">
                     <div class="label">状态</div>
                     <div class="value">
                        <p
                           v-if="props.orderList.status == 0 || props.orderList.status == 1"
                           :type="props.orderList.status == 0 ? 'warning' : 'danger'"
                        >
                           {{ props.orderList.status == 0 ? "待提交" : "审核中" }}
                        </p>
                        <p
                           v-else
                           :type="props.orderList.status == 2 ? 'success' : 'danger'"
                        >
                           {{ props.orderList.status == 2 ? "审核完成" : "审核拒绝" }}
                        </p>
                     </div>
                  </div>
               </div>
            </div>
            <div class="tab-container">
               <el-tabs v-model="activeTab">
                  <el-tab-pane
                     label="基础信息"
                     name="basic"
                  >
                     <div class="info-section">
                        <div class="section-title">
                           <el-icon>
                              <ArrowDown />
                           </el-icon>
                           <span>基础信息</span>
                        </div>
                        <el-form
                           :model="props.orderList"
                           label-width="100px"
                           label-position="left"
                           class="detail-form"
                        >
                           <el-row :gutter="20">
                              <el-col :span="12">
                                 <el-form-item label="采购退货单号">
                                    <span>{{ props.orderList.return_no }}</span>
                                 </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                 <el-form-item label="光联采购单">
                                    <span>{{ props.orderList.purchase_order_no }}</span>
                                 </el-form-item>
                              </el-col>
                           </el-row>
                           <el-row :gutter="20">
                              <el-col :span="12">
                                 <el-form-item label="退货金额(元)">
                                    <span>{{ props.orderList.total_amount }}</span>
                                 </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                 <el-form-item label="退货日期">
                                    <span>{{ props.orderList.return_date }}</span>
                                 </el-form-item>
                              </el-col>
                           </el-row>
                           <el-row :gutter="20">
                              <el-col :span="12">
                                 <el-form-item label="备注">
                                    <span>{{ props.orderList.note ? props.orderList.note : "--" }}</span>
                                 </el-form-item>
                              </el-col>

                              <el-col :span="12">
                                 <el-form-item label="退货负责人">
                                    <span>{{ props.orderList.manager_name }}</span>
                                 </el-form-item>
                              </el-col>
                           </el-row>
                           <el-row :gutter="20">
                              <el-col :span="12">
                                 <el-form-item label="负责人电话">
                                    <span>{{ props.orderList.manager_phone }}</span>
                                 </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                 <el-form-item label="状态">
                                    <span>
                                       <p
                                          v-if="props.orderList.status == 0 || props.orderList.status == 1"
                                          :type="props.orderList.status == 0 ? 'warning' : 'danger'"
                                       >
                                          {{ props.orderList.status == 0 ? "待提交" : "审核中" }}
                                       </p>
                                       <p
                                          v-else
                                          :type="props.orderList.status == 2 ? 'success' : 'danger'"
                                       >
                                          {{ props.orderList.status == 2 ? "审核完成" : "审核拒绝" }}
                                       </p></span
                                    >
                                 </el-form-item>
                              </el-col>
                           </el-row>
                        </el-form>
                     </div>

                     <div class="info-section">
                        <div class="section-title">
                           <el-icon>
                              <ArrowDown />
                           </el-icon>
                           <span>系统信息</span>
                        </div>
                        <el-form
                           :model="props.dialogRow"
                           label-width="100px"
                           label-position="left"
                           class="detail-form"
                        >
                           <el-row :gutter="20">
                              <el-col :span="12">
                                 <el-form-item label="创建人">
                                    <span>{{ props.orderList.creator_name }}</span>
                                 </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                 <el-form-item label="创建时间">
                                    <span>{{ props.orderList.created_at }}</span>
                                 </el-form-item>
                              </el-col>
                           </el-row>
                           <!-- <el-row :gutter="20">
                              <el-col :span="12">
                                 <el-form-item label="修改人">
                                    <span>{{ props.orderList.modifier_name }}</span>
                                 </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                 <el-form-item label="修改时间">
                                    <span>{{ props.orderList.update_time || "2024-02-02 11:16" }}</span>
                                 </el-form-item>
                              </el-col>
                           </el-row> -->
                        </el-form>
                     </div>
                  </el-tab-pane>
                  <el-tab-pane
                     label="退货产品"
                     name="purchased-products"
                  >
                     <div class="record-content">
                        <div class="search-bar">
                           <el-input
                              v-model="recordSearch"
                              placeholder="产品名称/规格型号"
                              style="width: 300px"
                              suffix-icon="Search"
                              @input="handleProductSearch"
                           >
                           </el-input>
                        </div>

                        <div class="record-list inbound-list">
                           <el-table
                              :data="purchaseOrderItem"
                              border
                              style="width: 100%"
                           >
                              <el-table-column
                                 label="产品名称"
                                 prop="spu_name"
                                 width="180"
                                 align="center"
                              />
                              <el-table-column
                                 label="规格型号"
                                 prop="specification"
                                 width="100"
                                 align="center"
                              />
                              <el-table-column
                                 label="单位"
                                 prop="measure_unit_name"
                                 width="180"
                                 align="center"
                              />
                              <el-table-column
                                 label="采购数量"
                                 prop="num"
                                 width="90"
                                 align="center"
                              />
                              <el-table-column
                                 label="库存数量"
                                 prop="stock_num"
                                 width="auto"
                                 align="center"
                              />
                              <el-table-column
                                 label="采购单价"
                                 prop="price"
                                 width="auto"
                                 align="center"
                              />
                              <el-table-column
                                 label="退货数量"
                                 prop="return_num"
                                 width="auto"
                                 align="center"
                              />
                              <el-table-column
                                 label="退货单价"
                                 prop="return_price"
                                 width="auto"
                                 align="center"
                              />
                              <el-table-column
                                 label="退货金额"
                                 prop="return_total_price"
                                 width="auto"
                                 align="center"
                              />
                           </el-table>
                           <div style="height: 10px"></div>
                           <el-row justify="space-between">
                              <el-col span="6">
                                 <p>产品种类: {{ productList?.purchase_return_item?.length }}</p>
                              </el-col>
                              <el-col span="6">
                                 <p>产品总数(个): {{ totalNum }}</p>
                              </el-col>
                              <el-col span="6">
                                 <p>整单折扣(%): {{ productList?.return_discount }}</p>
                              </el-col>
                              <el-col span="6">
                                 <p>最终成交价合计(元): {{ productList?.total_amount }}</p>
                              </el-col>
                           </el-row>
                        </div>

                        <!-- <div class="pagination">
                           <Pagination
                              v-model:current-page="recordPage"
                              v-model:page-size="recordPageSize"
                              :page-sizes="[10, 20, 50, 100]"
                              :total="recordTotal"
                              layout="total, sizes, prev, pager, next, jumper"
                              @current-change="handleProductPageChange"
                              @size-change="handleProductSizeChange"
                           />
                        </div> -->
                     </div>
                  </el-tab-pane>
                  <el-tab-pane
                     label="出库情况"
                     name="warehousing"
                  >
                     <div class="inbound-content">
                        <!-- <div
                           class="search-bar"
                           style="justify-content: flex-start"
                        >
                           <el-input
                              v-model="inboundSearch"
                              placeholder="产品名称/规格型号/入库单号"
                              style="width: 300px"
                              suffix-icon="Search"
                              @input="handleWarehouseSearch"
                           >
                           </el-input>

                           <div class="filter-buttons">
                              <span class="margin-right-10">显示:</span>
                              <el-button
                                 :color="inboundStatusData === 'allpending' ? '#172B4D' : ''"
                                 @click="handleShowInbound('allpending')"
                              >
                                 全部入库
                              </el-button>
                              <el-button
                                 :color="inboundStatusData === 'pending' ? '#172B4D' : ''"
                                 @click="handleShowInbound('pending')"
                              >
                                 部分入库
                              </el-button>
                              <el-button
                                 :color="inboundStatusData === 'approved' ? '#172B4D' : ''"
                                 @click="handleShowInbound('approved')"
                              >
                                 待入库
                              </el-button>
                           </div>
                        </div> -->

                        <div class="inbound-list">
                           <el-table
                              :data="warehouseEntryList"
                              border
                              style="width: 100%"
                           >
                              <el-table-column
                                 label="产品名称"
                                 prop="spu_name"
                                 width="100"
                                 align="center"
                              />
                              <el-table-column
                                 label="规格型号"
                                 prop="specification"
                                 width="180"
                                 align="center"
                              />
                              <el-table-column
                                 label="单位"
                                 prop="measure_unit_name"
                                 width="120"
                                 align="center"
                              />
                              <el-table-column
                                 label="入库状态"
                                 prop="status_text"
                                 width="150"
                                 align="center"
                              />
                              <el-table-column
                                 label="库存数量"
                                 prop="stock_num"
                                 width="160"
                                 align="center"
                              />
                              <el-table-column
                                 label="出库数量"
                                 prop="out_num"
                                 width="120"
                                 align="center"
                              />
                              <el-table-column
                                 label="退货数量"
                                 prop="return_open_num"
                                 min-width="150"
                                 align="center"
                              />

                              <el-table-column
                                 label="出库单号"
                                 prop="out_no"
                                 align="center"
                              />
                              <el-table-column
                                 label="出库仓库"
                                 prop="warehouse_name"
                                 width="120"
                                 align="center"
                              />
                              <el-table-column
                                 label="出库人"
                                 prop="out_creator_name"
                                 align="center"
                              />
                              <el-table-column
                                 label="出库时间"
                                 prop="out_at"
                                 align="center"
                              />
                           </el-table>
                        </div>

                        <!-- <div class="pagination">
                           <Pagination
                              v-model:current-page="inboundPage"
                              v-model:page-size="inboundPageSize"
                              :page-sizes="[10, 20, 50, 100]"
                              :total="inboundTotal"
                              layout="total, sizes, prev, pager, next, jumper"
                              @current-change="handleWarehousePageChange"
                              @size-change="handleWarehouseSizeChange"
                           />
                        </div> -->
                     </div>
                  </el-tab-pane>
                  <el-tab-pane
                     label="审批流程"
                     name="audit-process"
                  >
                     <div class="outbound-content">
                        <div class="approval-timeline">
                           <el-timeline>
                              <el-timeline-item
                                 v-for="(activity, index) in auditLogData"
                                 v-if="auditLogData.length > 0"
                                 :key="index"
                                 :type="activity.status === 1 ? 'primary' : activity.status === 2 ? 'success' : 'success'"
                                 icon="MoreFilled"
                                 :hollow="activity.status === 'pending'"
                                 size="large"
                              >
                                 <div class="timeline-content">
                                    <div class="timeline-header">
                                       <span class="node-name">{{ activity.node }}</span>
                                       <!-- <span
                                          class="status"
                                          :class="activity.status"
                                          >{{ activity.statusText }}</span
                                       > -->
                                    </div>
                                    <div class="timeline-info">
                                       <div class="info-item">
                                          <span
                                             class="value"
                                             :style="{ color: activity.status === 1 ? '#909399' : activity.status === 2 ? '#67C23A' : '#F56C6C' }"
                                             >{{ activity.status_text }}</span
                                          >
                                       </div>
                                       <div class="info-item">
                                          <span class="label">审批人：</span>
                                          <span class="value">{{ activity.operator_name }}</span>
                                       </div>
                                       <!-- <div class="info-item">
                                          <span class="label">所属部门：</span>
                                          <span class="value">{{ activity.department }}</span>
                                       </div> -->
                                       <div class="info-item">
                                          <span class="value">{{ activity.created_at }}</span>
                                       </div>
                                       <div class="info-item">
                                          <!-- <span class="label">审批时间：</span> -->
                                          <span class="value">{{ activity.note ? activity.note : "--" }}</span>
                                       </div>
                                    </div>
                                    <!-- <div
                                       v-if="activity.comment"
                                       class="timeline-comment"
                                    >
                                       <span class="label">审批意见：</span>
                                       <span class="value">{{ activity.comment }}</span>
                                    </div> -->
                                 </div>
                              </el-timeline-item>
                              <el-timeline-item v-else>
                                 <div class="timeline-content">
                                    <div class="timeline-header">
                                       <span class="node-name">暂无审批流程</span>
                                    </div>
                                 </div>
                              </el-timeline-item>
                           </el-timeline>
                        </div>
                     </div>
                  </el-tab-pane>
                  <el-tab-pane
                     label="操作记录"
                     name="operator-log"
                  >
                     <div class="outbound-content">
                        <div class="approval-timeline">
                           <el-timeline>
                              <el-timeline-item
                                 v-for="(activity, index) in operatorLogData"
                                 :key="index"
                                 type="success"
                                 :color="activity.color"
                                 :icon="activity.icon"
                                 :hollow="activity.status === 'pending'"
                                 size="large"
                              >
                                 <div class="timeline-content">
                                    <div class="timeline-info">
                                       <div class="info-item">
                                          <span class="value">{{ activity.operator_name }}</span>
                                       </div>
                                       <div class="info-item">
                                          <span class="value">{{ activity.created_at }}</span>
                                       </div>
                                       <div class="info-item">
                                          <span
                                             class="value"
                                             style="display: block"
                                             :class="activity.status"
                                             >{{ activity.describe }}</span
                                          >
                                       </div>
                                    </div>
                                 </div>
                              </el-timeline-item>
                           </el-timeline>
                        </div>
                     </div>
                  </el-tab-pane>
               </el-tabs>
            </div>
         </div>
      </el-drawer>

      <ConsumablesSetup
         ref="consumablesSetupRef"
         v-model:dialogVisible="isShow"
         :dialogType="dialogType"
         :dialogRow="dialogRow"
      />
   </div>
</template>

<script setup lang="ts">
   import { ref, computed, defineProps, defineEmits, watch } from "vue";
   import { ArrowDown, Close, Search, RefreshRight, Download, Plus, Expand, Fold } from "@element-plus/icons-vue";
   import { MoreFilled } from "@element-plus/icons-vue";
   import api from "@/api/index.js";
   import type { TimelineItemProps } from "element-plus";
   import { get, set } from "lodash";
   import { debounce } from "lodash";
   interface ActivityType extends Partial<TimelineItemProps> {
      content: string;
   }
   const activityList: any[] = [
      {
         content: "发起申请",
         approver: "张明明",
         department: "生产部",
         time: "2023-12-01 13:32",
         status: "success",
         statusText: "同意",
         comment: "",
         color: "#67C23A",
         icon: "MoreFilled",
      },
   ];
   const props = defineProps({
      dialogVisible: {
         type: Boolean,
         default: false,
      },
      orderList: {
         type: Object,
         default: () => {},
      },
      dialogRow: {
         type: Object,
         default: () => ({}),
      },
   });
   const isShow = ref<boolean>(false);
   let dialogType = ref<string>("");
   let dialogRow = ref<any>({});
   const emit = defineEmits(["update:dialogVisible"]);

   const dialogVisible = computed({
      get: () => props.dialogVisible,
      set: (val) => emit("update:dialogVisible", val),
   });

   const activeTab = ref("basic");

   const inboundSearch = ref("");
   const inboundStatus = ref("all");
   const inboundPage = ref(1);
   const inboundPageSize = ref(10);
   const inboundTotal = ref(0);

   const recordSearch = ref("");
   const recordPage = ref(1);
   const recordPageSize = ref(10);
   const recordTotal = ref(0);
   const totalNum = computed(() => {
      return productList.value?.purchase_return_item?.reduce((acc, curr) => Number(acc) + Number(curr.return_num), 0);
   });
   const purchaseOrderItem = ref<any>([]);
   // 产品搜索和分页参数
   const productSearchParams = ref({
      keyword: "",
      page: 1,
      page_size: 10,
      id: "",
   });

   // 产品搜索处理函数（使用防抖）
   const handleProductSearch = debounce(async () => {
      if (productList.value?.purchase_return_item && productList.value.purchase_return_item.length > 0) {
         purchaseOrderItem.value = productList.value.purchase_return_item.filter(
            (item) =>
               item.product_name.toLowerCase().includes(recordSearch.value.toLowerCase()) ||
               (item.specification && item.specification.toLowerCase().includes(recordSearch.value.toLowerCase()))
         );
      } else {
         productSearchParams.value.page = 1;
         await loadProductData();
      }
   }, 500);

   // 加载产品数据
   const loadProductData = async () => {
      productSearchParams.value.id = props.orderList?.id;
      const res = await api.procurement.purchaseReturnDetail({
         id: productSearchParams.value.id,
         keyword: productSearchParams.value.keyword,
         page: productSearchParams.value.page,
         page_size: productSearchParams.value.page_size,
      });
      if (res.code === 200) {
         productList.value = { ...res.data };
         purchaseOrderItem.value = res.data.purchase_return_item;
      }
   };

   // 处理产品分页变化
   const handleProductPageChange = (page) => {
      productSearchParams.value.page = page;
      loadProductData();
   };

   // 处理产品每页数量变化
   const handleProductSizeChange = (size) => {
      productSearchParams.value.page_size = size;
      productSearchParams.value.page = 1;
      loadProductData();
   };

   // 入库情况搜索和分页参数
   const warehouseSearchParams = ref({
      keyword: "",
      page: 1,
      page_size: 10,
   });

   // 入库情况搜索处理函数（使用防抖）
   const handleWarehouseSearch = debounce(async () => {
      warehouseSearchParams.value.keyword = inboundSearch.value || props.orderList?.order_no;
      warehouseSearchParams.value.page = 1;
      await loadWarehouseData();
   }, 500);

   // 加载入库情况数据
   const loadWarehouseData = async () => {
      const res = await api.procurement.purchaseReturnProductOut({
         keyword: warehouseSearchParams.value.keyword,
         page: warehouseSearchParams.value.page,
         page_size: warehouseSearchParams.value.page_size,
         id: props.orderList?.id,
      });
      if (res.code === 200) {
         warehouseEntryList.value = res.data || [];
         inboundTotal.value = res.data.total || 0;
      }
   };

   // 处理入库情况分页变化
   const handleWarehousePageChange = (page) => {
      warehouseSearchParams.value.page = page;
      loadWarehouseData();
   };

   // 处理入库情况每页数量变化
   const handleWarehouseSizeChange = (size) => {
      warehouseSearchParams.value.page_size = size;
      warehouseSearchParams.value.page = 1;
      loadWarehouseData();
   };

   // 退货记录搜索和分页参数
   const returnSearchParams = ref({
      keyword: "",
      page: 1,
      page_size: 10,
      purchase_order_id: "",
   });

   // 退货记录搜索处理函数（使用防抖）
   const handleReturnSearch = debounce(async () => {
      returnSearchParams.value.keyword = outboundRecordSearch.value;
      returnSearchParams.value.page = 1;
      await loadReturnData();
   }, 500);

   // 加载退货记录数据
   const loadReturnData = async () => {
      returnSearchParams.value.purchase_order_id = props.orderList?.id;
      const res = await api.procurement.purchaseReturnList({
         purchase_order_id: returnSearchParams.value.purchase_order_id,
         keyword: returnSearchParams.value.keyword,
         page: returnSearchParams.value.page,
         page_size: returnSearchParams.value.page_size,
      });
      if (res.code === 200) {
         returnData.value = res.data.data || [];
         outboundRecordTotal.value = res.data.total || 0;
      }
   };

   // 处理退货记录分页变化
   const handleReturnPageChange = (page) => {
      returnSearchParams.value.page = page;
      loadReturnData();
   };

   // 处理退货记录每页数量变化
   const handleReturnSizeChange = (size) => {
      returnSearchParams.value.page_size = size;
      returnSearchParams.value.page = 1;
      loadReturnData();
   };

   watch([() => activeTab.value, () => props.orderList?.id], async () => {
      switch (activeTab.value) {
         case "purchased-products":
            productSearchParams.value.id = props.orderList?.id;
            await loadProductData();
            break;
         case "warehousing":
            warehouseSearchParams.value.keyword = props.orderList?.order_no;
            await loadWarehouseData();
            break;
         case "return-goods":
            returnSearchParams.value.purchase_order_id = props.orderList?.id;
            await loadReturnData();
            break;
         case "audit-process":
            const _d = await api.procurement.purchaseReturnAuditLog({ id: props.orderList?.id });
            if (_d.code === 200) {
               auditLogData.value = _d.data.data || [];
            }
            break;
         case "operator-log":
            const _e = await api.procurement.purchaseReturnOperatorLog({ id: props.orderList?.id });
            if (_e.code === 200) {
               operatorLogData.value = _e.data.data || [];
            }
            break;
         default:
            break;
      }
   });
   // 产品库存数据
   const productList = ref<any>({});
   // 入库单数据
   const warehouseEntryList = ref([]);
   // 退货记录数据
   const returnData = ref([]);
   // 审批流程数据
   const auditLogData = ref<any>([]);
   // 操作日志数据
   const operatorLogData = ref<any>([]);

   let inboundStatusData = ref("pending");
   const handleShowInbound = (status: string) => {
      inboundStatusData.value = status;
   };

   // 出库相关的分页和搜索数据
   const outboundSearch = ref("");
   const outboundStatus = ref("all");
   const outboundPage = ref(1);
   const outboundPageSize = ref(10);
   const outboundTotal = ref(0);

   const outboundRecordSearch = ref("");
   const outboundRecordPage = ref(1);
   const outboundRecordPageSize = ref(10);
   const outboundRecordTotal = ref(0);

   // 库存盘点数据
   const stockCheckList = ref([]);
   let stockCheckStatusData = ref("pending");
   const handleShowStockCheck = (status: string) => {
      stockCheckStatusData.value = status;
   };
</script>

<style lang="scss" scoped>
   .approval-timeline {
      padding: 20px;

      .timeline-content {
         padding: 10px;
         background-color: #f9f9f9;
         border-radius: 4px;
         margin-bottom: 10px;

         .timeline-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

            .node-name {
               font-weight: bold;
               font-size: 16px;
            }

            .status {
               &.success {
                  color: #67c23a;
               }
               &.error {
                  color: #f56c6c;
               }
               &.pending {
                  color: #909399;
               }
            }
         }

         .timeline-info {
            display: flex;
            margin-bottom: 10px;

            .info-item {
               margin-right: 20px;

               .label {
                  color: #909399;
               }

               .value {
                  color: #333;
                  margin-left: 5px;
               }
            }
         }

         .timeline-comment {
            .label {
               color: #909399;
            }

            .value {
               color: #333;
               margin-left: 5px;
            }
         }
      }
   }

   :deep(.el-form-item__content) {
      background: #ebecf0;
      padding-left: 20px;
   }
   ::v-deep .inventory-layout .product-category .category-list .el-menu-item.is-active {
      color: #6860ff !important;
      background-color: #6860ff15 !important;
   }

   //表格样式
   ::v-deep .product-list {
      .el-table {
         --el-table-header-bg-color: rgba(235, 236, 240, 1);

         th {
            color: #444;
            font-weight: bold;
         }
      }
   }

   //表格样式
   ::v-deep .inbound-list {
      .el-table {
         --el-table-header-bg-color: rgba(235, 236, 240, 1);

         th {
            color: #444;
            font-weight: bold;
         }
      }
   }

   //分页样式
   .pagination {
      width: calc(100% - 1000px);
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding-top: 10px;
   }

   .warehouse-details {
      .drawer-header {
         padding: 16px 20px;
         //  border-bottom: 1px solid #e4e7ed;
         display: flex;
         justify-content: space-between;
         align-items: center;

         .title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
         }
      }

      .drawer-content {
         height: calc(100% - 60px);
         overflow-y: auto;

         .tab-header {
            padding: 20px;
            background-color: #f5f7fa;
            margin: 0 20px;
            .warehouse-info {
               display: flex;
               justify-content: space-around;
               .info-item {
                  .label {
                     color: #909399;
                     // margin-right: 8px;
                     margin-bottom: 4px;
                  }

                  .value {
                     color: #333;
                     font-weight: 500;
                     font-size: 14px;
                  }
               }
            }
         }

         .tab-container {
            padding: 20px;

            :deep(.el-tabs__header) {
               margin-bottom: 20px;
            }
         }

         .info-section {
            margin-bottom: 24px;

            .section-title {
               background-color: #f5f7fa;
               padding: 12px 10px;
               display: flex;
               align-items: center;
               gap: 8px;
               margin-bottom: 16px;
               font-size: 14px;
               font-weight: bold;
               color: #333;

               .el-icon {
                  font-size: 16px;
                  color: #626aef;
               }
            }

            .info-grid {
               padding: 16px;
               border-radius: 4px;

               .info-row {
                  display: flex;
                  margin-bottom: 16px;

                  &:last-child {
                     margin-bottom: 0;
                  }

                  .info-col {
                     flex: 1;
                     display: flex;
                     align-items: center;

                     &.full-width {
                        flex: 2;
                     }

                     .label {
                        width: 80px;
                        color: #909399;
                        flex-shrink: 0;
                        margin-left: 10px;
                     }

                     .value {
                        color: #333;
                        flex: 1;
                        display: inline-block;
                        padding: 6px;
                        font-size: 14px;
                        background-color: #f5f7fa;
                     }
                  }
               }
            }
         }
      }
   }

   :deep(.el-drawer) {
      .el-drawer__body {
         padding: 0;
      }
   }

   :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
   }

   :deep(.el-tabs__active-bar) {
      background-color: #626aef;
   }

   :deep(.el-tabs__item.is-active) {
      color: #626aef;
   }

   :deep(.el-tabs__item:hover) {
      color: #626aef;
   }

   .search-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .right-buttons {
         display: flex;
         gap: 8px;
      }

      .filter-buttons {
         margin-left: 16px;
      }
   }

   .product-list,
   .inbound-list,
   .record-list {
      margin-bottom: 16px;
   }

   .pagination {
      display: flex;
      justify-content: flex-end;
      padding: 16px 0;
   }

   :deep(.el-table) {
      --el-table-header-bg-color: #f5f7fa;

      th {
         background-color: var(--el-table-header-bg-color);
         color: #606266;
         font-weight: 500;
      }
   }

   :deep(.el-button) {
      &.is-plain {
         &:hover {
            color: #626aef;
            border-color: #626aef;
         }
      }
   }

   :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
      background-color: #626aef;
      border-color: #626aef;
      box-shadow: -1px 0 0 0 #626aef;
   }

   .inventory-layout {
      display: flex;
      height: 100%;

      .product-category {
         width: 200px;
         border-right: 1px solid var(--el-border-color-light);
         transition: width 0.3s;
         background-color: rgb(245, 247, 249);
         padding: 0px 12px;
         margin-right: 10px;

         &.is-collapsed {
            width: 0;
            overflow: hidden;
         }

         .category-header {
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--el-border-color-light);

            .header-title {
               display: flex;
               align-items: center;
               gap: 90px;
               justify-content: space-between;
               font-size: 14px;
               font-weight: 500;
            }
         }

         .category-search {
            padding: 12px;
            border-bottom: 1px solid var(--el-border-color-light);
         }

         .category-list {
            .el-menu {
               border-right: none;
            }

            .el-menu-item {
               height: 40px;
               line-height: 40px;

               &.is-active {
                  background-color: var(--el-color-primary-light-9);
                  color: var(--el-color-primary);
               }
            }
         }
      }

      .product-content {
         flex: 1;

         transition: margin-left 0.3s;

         &.is-expanded {
            margin-left: 0;
         }

         .search-bar {
            margin-bottom: 16px;
         }
      }
   }

   // 表格样式优化
   .product-list {
      :deep(.el-table) {
         --el-table-header-bg-color: #f5f7fa;

         th {
            background-color: var(--el-table-header-bg-color);
            color: #606266;
            font-weight: 500;
         }
      }
   }
</style>
